<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
</head>
<body>

<script type="text/javascript">
        window.onload = function(){

        var img_upload=document.getElementById("img_upload");
        var base64_code=document.getElementById("base64_code");
        var img_area=document.getElementById("img_area");

        img_upload.addEventListener('change',readFile,false);}
        function readFile(){
            var file=this.files[0];
            if(!/image\/\w+/.test(file.type)){
                alert("请确保文件为图像类型");
                return false;
            }
            var reader=new FileReader();
            reader.readAsDataURL(file);
            reader.onload=function(){
                base64_code.innerHTML = this.result;
                img_area.innerHTML = '<div>图片img标签展示：</div><img src="'+this.result+'" alt=""/>';
            }
        }
 </script>


<form action="/system" method="POST">
    主窗口背景图片:<input type="file" id="img_upload"  />
    <textarea name="img64" hidden=true id="base64_code" rows="1" cols="1"></textarea>
    <p id="img_area"></p>
    主窗口标题:<input type="text" name="title"></br>

    主窗口内容:</br>
    <textarea name="content" rows="10" cols="30"></textarea></br>

    通知公告:</br>
    <textarea name="message" rows="10" cols="30"></textarea></br>
    <input type="submit" value="提交">
</form>

</body>
</html>
